<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <script>
        function resize() {
				var h = document.body.clientWidth;
				console.log(h);
				var banner = document.getElementById("container");
				banner.setAttribute('style', 'width:' + h + "px");
        }
    </script>
</head>
<body onload="resize()">
    <div class="web" id="container">
        <header>
            <div class="logo fl"><img src="images/logo.png" alt=""></div>
            <div class="dh fr">
                <ul>
                    <li class="fl"><a href="">
                            <p>首页</p><span>Home</span>
                        </a></li>
                    <li class="fl"><a href="./personal.html">
                            <p>个人中心</p><span>Personal center</span>
                        </a></li>    
                    <li class="fl"><a href="">
                            <p>游戏</p><span>Game</span>
                        </a></li>
                    <li class="fl"><a href="">
                            <p>案例</p><span>Case</span>
                        </a></li>
                    <li class="fl"><a href="">
                            <p>关于我们</p><span>About us</span>
                        </a></li>
                    <li class="fl"><i class="iconfont icon-weixinfang"></i></li>
                </ul>
            </div>
        </header>
        <div class="kv">
             <div class="shou"><img src="images/shou.jpeg" alt=""></div> 
             <div class="game">
                 <a class="play" href="">
                     <span>试玩游戏</span>   
                     <div class="yuan fr"><img src="images/jx.png" alt=""></div>
                 </a>
                 <p>全方位无死角展示<br>游戏各个细节</p>
             </div>
            <div class="more">
                <h2>我们能给</h2>
                <h1>客户带来利益</h1>
                <p>每一个细节的处理<br>都体现出我们对时尚的不懈追求</p>
                <a href="">了解更多</a>
            </div>
            <ul class="yq">
                <li class="fl first"></li>
                <li class="fl"></li>
                <li class="fl"></li>
                <li class="fl"></li>
            </ul>
            <div class="phone">
                <img src="images/phone.png" alt="">
                <img src="images/kv.png" alt="" class="main">
            </div>
            <ul class="dh1">
                <li class="fl"><img src="images/head1.png" alt=""></li>
                <li class="fl"><img src="images/head2.png" alt=""></li>
                <li class="fl"><img src="images/head3.png" alt=""></li>
                <li class="fl"><img src="images/head4.png" alt=""></li>
            </ul>
            <ul class="dh2">
                <li class="fr"><img src="images/head8.png" alt=""></li>
                <li class="fr"><img src="images/head7.png" alt=""></li>
                <li class="fr"><img src="images/head6.png" alt=""></li>
                <li class="fr"><img src="images/head5.png" alt=""></li>
            </ul>
        </div>
        <div class="banner">
            <div class="mogu"><img src="images/mogu.png" alt=""></div>
            <div class="yxj"><img src="images/yxj.png" alt=""></div>
            <div class="step clearfix">
                <div class="one fl">
                    <div class="step1 fl"><img src="images/step1.png" alt=""></div>
                    <h4>STEP ONE</h4>
                    <span>选择一个游戏，换图</span>
                </div>
                <div class="second fl">
                    <div class="step2"><img src="images/step2.png" alt=""></div>
                    <h4>THE SECOND STEP </h4>
                    <span>选择一个游戏，换图</span>
                </div>
                <div class="third fl">
                    <div class="step3"><img src="images/step3.png" alt=""></div>
                    <h4>THE THIRD STEP</h4>
                    <span>选择一个游戏，换图</span>
                </div>
            </div>
        </div>
        <div class="turn">
            <span class="title">狂转游戏</span>
            <span class="forword">潮流趣味游戏，引发全民G点，疯狂转发。<br>
                还不马上购买，植入你要传播的产品？</span>
            <p><strong>Turn</strong> made game</p>
            <ul class="clearfix">
                <li class="fl">
                    <div class="hd">
                        <h4>剑圣传奇</h4>
                        <p>2014-07-09<br>使用次数：20</p>
                        <div class="line"></div>
                        <a href="">购买</a>
                        <i class="iconfont icon-kongwujiaoxing"></i>
                        <!-- <img src="images/arrow.png" alt="" class="lf"> -->
                    </div>
                    <div class="run"><img src="images/3.jpg" alt=""></div>
                </li>
                <li class="fl two">
                    <div class="hd">
                        <h4>PLAGUE LNC</h4>
                        <p>2014-07-09<br>使用次数：20</p>
                        <div class="line"></div>
                        <a href="">购买</a>
                        <i class="iconfont icon-kongwujiaoxing"></i>
                    </div>
                    <div class="run"><img src="images/2.jpg" alt=""></div>
                </li>
                <li class="fl">
                    <div class="hd">
                        <h4>地狱边境</h4>
                        <p>2014-07-09<br>使用次数：20</p>
                        <div class="line"></div>
                        <a href="">购买</a>
                        <!-- <img src="images/mouth.png" alt="" class="rh"> -->
                        <i class="iconfont icon-kongwujiaoxing"></i>
                    </div>
                    <div class="run"><img src="images/1.jpg" alt=""></div>
                </li>
            </ul>
        </div>
        <div class="lottery">
        	<div class="pf"><img src="images/pf.png" alt=""></div>
            <span class="title">抽奖游戏</span>
            <span class="forword">形式各样抽奖游戏，引发全民尖叫，惊喜不断<br>
                还不马上购买，植入你要传播的产品？</span>
            <p><strong>Lottery</strong> game</p>
            <ul class="clearfix">
                <li class="fl">
                    <div class="hd">
                        <h4>功夫西游</h4>
                        <p>2014-07-09<br>使用次数：20</p>
                        <div class="line"></div>
                        <a href="">购买</a>
                        <!-- <img src="images/animal.png" alt="" class="animal"> -->
                        <i class="iconfont icon-kongwujiaoxing"></i>
                    </div>
                    <div class="run"><img src="images/4.jpg" alt=""></div>
                </li>
                <li class="fl two">
                    <div class="hd">
                        <h4>宝石迷阵</h4>
                        <p>2014-07-09<br>使用次数：20</p>
                        <div class="line"></div>
                        <a href="">购买</a>
                        <i class="iconfont icon-kongwujiaoxing"></i>
                    </div>
                    <div class="run"><img src="images/5.jpg" alt=""></div>
                </li>
                <li class="fl">
                    <div class="hd">
                        <h4>植物大战僵尸</h4>
                        <p>2014-07-09<br>使用次数：20</p>
                        <div class="line"></div>
                        <a href="">购买</a>
                        <!-- <img src="images/camera.png" alt="" class="camera"> -->
                        <i class="iconfont icon-kongwujiaoxing"></i>
                    </div>
                    <div class="run"><img src="images/6.jpg" alt=""></div>
                </li>
            </ul>
        </div>
        <div class="case">
            <span class="title">经典案例分享</span>
            <span class="forword">大家对胖糖的信赖，<br>
                来源于其产品与需求巧妙结合的经典营销效果。</span>
            <p><strong>Lottery</strong> game</p>
            <div class="top clearfix">
                <div class="nouth clearfix fl">
                    <div class="nouth_lf fl">
                        <div class="air"><img src="images/airlogo.png" alt=""></div>
                        <div class="date">
                            <p>24</p><span>october</span>
                        </div>
                        <i class="iconfont icon-wujiaoxing"></i>
                    </div>
                    <div class="middle fl">
                        <h5>南方航空</h5>
                        <span>
                            飞行挑战赛<br>
                            2014年5月14日--5月27日<br>
                            扫码关注微信参加飞行挑战赛并抽奖<br>
                            即有机会赢取丰厚奖品
                        </span>
                    </div>
                   <div class="plane fl">
                        <img src="images/plane.jpg" alt="" class="nouth_rh">
                        <div class="mask"><i class="iconfont icon-shizijia"></i></div>
                    </div>
                </div>
                <div class="sky clearfix fl">
                    <div class="nouth_lf fl">
                        <div class="air"><img src="images/airlogo.png" alt=""></div>
                        <div class="date">
                            <p>24</p><span>october</span>
                        </div>
                        <i class="iconfont icon-wujiaoxing"></i>
                    </div>
                    <div class="middle fl">
                        <h5>南方航空</h5>
                        <span>
                            飞行挑战赛<br>
                            2014年5月14日--5月27日<br>
                            扫码关注微信参加飞行挑战赛并抽奖<br>
                            即有机会赢取丰厚奖品
                        </span>
                    </div>
                    <div class="plane fl">
                            <img src="images/plane.jpg" alt="" class="nouth_rh">
                            <div class="mask"><i class="iconfont icon-shizijia"></i></div>
                        </div>
                </div>
            </div>
            <div class="top clearfix">
                <div class="nouth clearfix fl">
                    <div class="nouth_lf fl">
                        <div class="air"><img src="images/airlogo.png" alt=""></div>
                        <div class="date">
                            <p>24</p><span>october</span>
                        </div>
                        <i class="iconfont icon-wujiaoxing"></i>
                    </div>
                    <div class="middle fl">
                        <h5>南方航空</h5>
                        <span>
                            飞行挑战赛<br>
                            2014年5月14日--5月27日<br>
                            扫码关注微信参加飞行挑战赛并抽奖<br>
                            即有机会赢取丰厚奖品
                        </span>
                    </div>
                    <div class="plane fl">
                            <img src="images/plane.jpg" alt="" class="nouth_rh">
                            <div class="mask"><i class="iconfont icon-shizijia"></i></div>
                        </div>
                </div>
                <div class="sky clearfix fl">
                    <div class="nouth_lf fl">
                        <div class="air"><img src="images/airlogo.png" alt=""></div>
                        <div class="date">
                            <p>24</p><span>october</span>
                        </div>
                        <i class="iconfont icon-wujiaoxing"></i>
                    </div>
                    <div class="middle fl">
                        <h5>南方航空</h5>
                        <span>
                            飞行挑战赛<br>
                            2014年5月14日--5月27日<br>
                            扫码关注微信参加飞行挑战赛并抽奖<br>
                            即有机会赢取丰厚奖品
                        </span>
                    </div>
                   <div class="plane fl">
                            <img src="images/plane.jpg" alt="" class="nouth_rh">
                            <div class="mask"><i class="iconfont icon-shizijia"></i></div>
                        </div>
                </div>
            </div>
        </div>
        <footer>
            <div class="footer1"><img src="images/footer1.png" alt=""></div>
            <div class="footer2"><img src="images/footer2.png" alt=""></div>
            <span>Copyright © 2014 Pangtang. All Rights Reserved. 版权所有</span>
        </footer>
    </div>
</body>

</html>